<template>
  <div class="h-full w-full flex">
    <!-- 左侧部分 -->
    <div class="w-[16%] h-full shadow-box pt-[80px] relative">
      <div class="text-2xl font-bold text-center">任务列表</div>
      <div class="mt-8">
        <Input
          placeholder="筛选任务..."
          class="w-[80%] mx-auto !h-[30px]"
          @update:modelValue="search"
        />
      </div>
      <div class="mt-8 text-center">
        <Button
          class="bg-transparent text-black font-normal hover:bg-transparent active:bg-transparent hover:opacity-60 shadow-box3"
          @click="checkedAllOrNot"
          >全选/取消全选</Button
        >
      </div>
      <ScrollArea class="mt-4 h-[58%]">
        <div class="p-4">
          <div
            v-for="(item, index) in filterOptions"
            :key="item.id"
            class="mt-6 flex items-center space-x-2 justify-center"
          >
            <HoverCard>
              <HoverCardTrigger as-child>
                <Button variant="link">
                  <Checkbox
                    :id="item.id"
                    :checked="item.checked"
                    @update:checked="item.checked = !item.checked"
                  />
                  <label
                    :for="item.id"
                    class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                  >
                    {{ item.label }}
                  </label>
                </Button>
              </HoverCardTrigger>
              <HoverCardContent class="w-[300px] px-6">
                <div class="flex justify-between space-x-4">
                  <div class="space-y-1">
                    <h4 class="text-sm font-semibold text-center">
                      <Button variant="link">
                        <Checkbox
                          :id="item.id"
                          :checked="item.checked"
                          @update:checked="item.checked = !item.checked"
                        />
                        <label
                          :for="item.id"
                          class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                        >
                          {{ item.label }}
                        </label>
                      </Button>
                    </h4>
                    <div class="text-xl font-semibold !my-4">
                      {{ item.label }}
                    </div>
                    <div class="space-y-1">
                      <div class="flex flex-wrap">
                        <span class="font-bold">任务名称：</span
                        ><span>{{ item.label }}</span>
                      </div>
                      <div class="flex flex-wrap">
                        <span class="font-bold">开始时间：</span
                        ><span>{{ item.startTime }}</span>
                      </div>
                      <div class="flex flex-wrap">
                        <span class="font-bold">结束时间：</span
                        ><span>{{ item.endTIme }}</span>
                      </div>
                      <div class="flex flex-wrap">
                        <span class="font-bold">任务执行人：</span
                        ><span>{{ item.executor }}</span>
                      </div>
                      <div class="flex flex-wrap">
                        <span class="font-bold">累计检测量：</span
                        ><span>{{ item.total }}</span>
                      </div>
                      <div class="flex flex-wrap">
                        <span class="font-bold">告警计数：</span
                        ><span>{{ item.warningTimes }}</span>
                      </div>
                      <div class="flex flex-wrap">
                        <span class="font-bold">平均节拍：</span
                        ><span>{{ item.beat }}</span>
                      </div>
                      <div class="flex flex-wrap">
                        <span class="font-bold">视频保存地址：</span
                        ><span class="">{{ item.videoUrl }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </HoverCardContent>
            </HoverCard>
          </div>
        </div>
      </ScrollArea>
      <div
        class="flex flex-col bottom-10 absolute left-1/2 transform -translate-x-1/2"
      >
        <Button
          class="bg-transparent text-black font-normal hover:bg-transparent active:bg-transparent hover:opacity-60 shadow-box3"
          >导出数据</Button
        >
        <Dialog :open="isShowDialog">
          <DialogTrigger as-child @click="isShowDialog = true">
            <Button
              class="mt-6 bg-transparent text-black font-normal hover:bg-transparent active:bg-transparent hover:opacity-60 shadow-box3"
              >创建任务</Button
            >
          </DialogTrigger>
          <DialogContent class="sm:max-w-[425px]">
            <DialogHeader>
              <DialogTitle>创建新任务</DialogTitle>
            </DialogHeader>
            <form class="w-full space-y-2 mt-4" @submit="onSubmit">
              <FormField v-slot="{ componentField }" name="name">
                <FormItem>
                  <FormLabel
                    >任务名称:<span class="text-[#EF4444] mr-1"
                      >*</span
                    ></FormLabel
                  >
                  <FormControl class="h-[30px]">
                    <Input
                      type="text"
                      placeholder="请输入任务名称"
                      v-bind="componentField"
                    />
                  </FormControl>
                  <FormMessage class="" />
                </FormItem>
              </FormField>
              <FormField v-slot="{ componentField }" name="executor">
                <FormItem>
                  <FormLabel
                    >执行人:<span class="text-[#EF4444] mr-1"
                      >*</span
                    ></FormLabel
                  >
                  <FormControl class="h-[30px]">
                    <Input
                      type="text"
                      placeholder="请输入执行人"
                      v-bind="componentField"
                    />
                  </FormControl>
                  <FormMessage class="" />
                </FormItem>
              </FormField>
              <FormField v-slot="{ componentField }" name="origin">
                <FormItem class="">
                  <FormLabel>视频来源:</FormLabel>
                  <Select
                    v-bind="componentField"
                    @update:modelValue="handleOriginChange"
                  >
                    <FormControl class="h-[30px]">
                      <SelectTrigger>
                        <SelectValue placeholder="请选择视频来源" />
                      </SelectTrigger>
                    </FormControl>
                    <SelectContent>
                      <SelectGroup>
                        <SelectItem value="1"> 摄像头 </SelectItem>
                        <SelectItem value="2"> 本地视频 </SelectItem>
                      </SelectGroup>
                    </SelectContent>
                  </Select>
                  <FormMessage />
                </FormItem>
              </FormField>
              <FormField v-slot="{ componentField }" name="camera">
                <FormItem v-if="cameraType === '1'">
                  <FormLabel>选择摄像头:</FormLabel>
                  <Select v-bind="componentField" class="">
                    <FormControl class="h-[30px]">
                      <SelectTrigger>
                        <SelectValue placeholder="请选择" />
                      </SelectTrigger>
                    </FormControl>
                    <SelectContent>
                      <SelectGroup>
                        <SelectItem value="1">摄像头1</SelectItem>
                        <SelectItem value="2">摄像头2</SelectItem>
                      </SelectGroup>
                    </SelectContent>
                  </Select>
                  <FormMessage />
                </FormItem>
                <FormItem v-if="cameraType === '2'">
                  <FormLabel>视频路径:</FormLabel>
                  <FormControl class="h-[40px]">
                    <Input type="file" @change="handleFileChange" />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              </FormField>
              <div class="mt-2 font-bold text-sm w-32">检测目标:</div>
              <FormField
                v-slot="{ value, handleChange }"
                type="checkbox"
                name="testingObject"
              >
                <FormItem
                  class="flex flex-row items-start gap-x-3 space-y-0 rounded-md"
                >
                  <FormControl>
                    <Checkbox :checked="value" @update:checked="handleChange" />
                  </FormControl>
                  <div class="space-y-2 leading-none">
                    <FormLabel>目标1</FormLabel>
                    <FormDescription class="flex flex-wrap items-center gap-4">
                      <div
                        class="bg-[#E98000]/10 border border-[#E98000]/60 px-5 py-1 rounded-md"
                      >
                        1126×686×484mm箱子
                      </div>
                      <div
                        class="bg-[#32C300]/10 border border-[#32C300]/60 px-5 py-1 rounded-md"
                      >
                        WI-FI
                      </div>
                      <div
                        class="bg-[#00A9C3]/10 border border-[#00A9C3]/60 px-5 py-1 rounded-md"
                      >
                        说明书
                      </div>
                      <div
                        class="bg-[#DF344E]/10 border border-[#DF344E]/60 px-5 py-1 rounded-md"
                      >
                        保修单
                      </div>
                    </FormDescription>
                    <FormMessage />
                  </div>
                </FormItem>
              </FormField>
              <FormField
                v-slot="{ value, handleChange }"
                type="checkbox"
                name="testingObject2"
              >
                <FormItem
                  class="flex flex-row items-start gap-x-3 space-y-0 rounded-md"
                >
                  <FormControl>
                    <Checkbox :checked="value" @update:checked="handleChange" />
                  </FormControl>
                  <div class="space-y-2 leading-none">
                    <FormLabel>目标2</FormLabel>
                    <FormDescription class="flex flex-wrap items-center gap-4">
                      <div
                        class="bg-[#E98000]/10 border border-[#E98000]/60 px-5 py-1 rounded-md"
                      >
                        1126×686×484mm箱子
                      </div>
                      <div
                        class="bg-[#32C300]/10 border border-[#32C300]/60 px-5 py-1 rounded-md"
                      >
                        WI-FI
                      </div>
                      <div
                        class="bg-[#00A9C3]/10 border border-[#00A9C3]/60 px-5 py-1 rounded-md"
                      >
                        说明书
                      </div>
                      <div
                        class="bg-[#DF344E]/10 border border-[#DF344E]/60 px-5 py-1 rounded-md"
                      >
                        保修单
                      </div>
                    </FormDescription>
                    <FormMessage />
                  </div>
                </FormItem>
              </FormField>
              <div class="flex items-center justify-center !mt-8 gap-8">
                <Button type="submit"> 确定 </Button>

                <Button variant="secondary" @click="isShowDialog = false">
                  取消
                </Button>
              </div>
            </form>
            <!-- <DialogFooter>
              <Button type="submit"> Save changes </Button>
            </DialogFooter> -->
          </DialogContent>
        </Dialog>
      </div>
    </div>
    <!-- 中间部分 -->
    <div class="w-[68%] h-full px-[60px] flex items-center justify-center">
      <div class="w-full h-1/2 flex relative">
        <div class="w-[300px] h-full shadow-box2 rounded-xl py-[45px] pl-12">
          <div class="flex mb-2">
            <div class="font-bold">任务名称：</div>
            <div>{{ curTask.name }}</div>
          </div>
          <div class="flex mb-2">
            <div class="font-bold">执行人：</div>
            <div>{{ curTask.executor }}</div>
          </div>
          <div class="flex mb-2">
            <div class="font-bold">开始时间：</div>
            <div class="truncate">{{ curTask.startTime }}</div>
          </div>
          <div class="flex mb-2">
            <div class="font-bold">持续时间：</div>
            <div>{{ curTask.duration }}</div>
          </div>
          <div class="flex mb-2">
            <div class="font-bold">累计检测：</div>
            <div>{{ curTask.total }}件</div>
          </div>
          <div class="flex mb-2">
            <div class="font-bold">有效告警：</div>
            <div>{{ curTask.warningTimes }}件</div>
          </div>
          <div class="flex mb-2">
            <div class="font-bold">节拍：</div>
            <div>{{ curTask.beat }}min/件</div>
          </div>
          <div>
            <div class="font-bold">检测目标：</div>
            <div class="mt-2">
              <Dialog
                v-for="(item, index) in curTask.testingObjects"
                :key="item.id"
              >
                <DialogTrigger as-child>
                  <div class="mb-2 flex space-x-2 items-center w-[80px]">
                    <img
                      src="../assets/images/testingImg.png"
                      class="w-5 h-4 cursor-pointer"
                    /><span class="cursor-pointer">{{ item.name }}</span>
                  </div>
                </DialogTrigger>

                <DialogContent class="sm:max-w-[425px]">
                  <DialogHeader>
                    <DialogTitle>{{ item.name }}</DialogTitle>
                  </DialogHeader>
                  <div class="p-4">
                    <img src="../assets/images/test.png" alt="" />
                  </div>
                </DialogContent>
              </Dialog>
            </div>
          </div>
        </div>
        <div class="w-[calc(100%-300px)] h-full shadow-box2 rounded-xl">
          <Video></Video>
        </div>
        <div class="absolute -bottom-16 right-0">
          <button
            class="w-[180px] p-2 rounded-md hover:opacity-80 active:opacity-100 text-white !bg-[#DF4A34]"
          >
            结束任务
          </button>
        </div>
      </div>
    </div>

    <!-- 右侧部分 -->
    <div class="w-[16%] h-full relative">
      <div class="mt-8 text-[48px] font-bold">
        <span class="text-[#DF4A34]">NG</span><span class="mx-1">/</span
        ><span class="text-[#54A848]">OK</span>
      </div>
      <div class="font-bold mt-16 text-2xl">检测结果</div>
      <div class="font-bold mt-4 text-2xl">节拍开始：</div>
      <div class="mt-6">
        <div
          v-for="(item, index) in detectionObjects"
          :key="item.id"
          class="flex flex-col mt-8"
        >
          <div>
            <button
              class="w-4/5 p-2 rounded-md hover:opacity-80 active:opacity-100 text-white duration-200"
              :class="{
                '!bg-[#DF4A34]': item.progress[0] < 100,
                '!bg-[#54A848]': item.progress[0] === 100,
              }"
            >
              {{ item.name }}
            </button>
          </div>
          <div class="mt-6 w-full">
            <Slider
              v-model="item.progress"
              :max="100"
              :step="1"
              class="w-4/5"
            />
            <div class="w-4/5 flex justify-between mt-1">
              <div>1</div>
              <div>10</div>
            </div>
          </div>
        </div>
      </div>
      <Button
        class="bottom-16 absolute left-1/2 transform -translate-x-1/2 w-4/5 mt-10 bg-transparent text-black font-normal hover:bg-transparent active:bg-transparent hover:opacity-60 shadow-box3"
        >已补齐</Button
      >
    </div>
  </div>
</template>

<script setup>
import { Button } from '@/components/ui/button'
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from '@/components/ui/hover-card'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Checkbox } from '@/components/ui/checkbox'
import { ScrollArea } from '@/components/ui/scroll-area'
import { Slider } from '@/components/ui/slider'
import {
  Dialog,
  DialogContent,
  DialogClose,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog'
import { useToast } from '@/components/ui/toast/use-toast'
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import {
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form'
import { toTypedSchema } from '@vee-validate/zod'
import { useForm } from 'vee-validate'

import * as z from 'zod'
import Video from '@/components/ui/video/index.vue'
import success from '@/assets/images/success.png'

const { toast } = useToast()
const search = e => {
  console.log('🚀 ~ search ~ e:', e)
  if (e === '') {
    filterOptions.value = [
      {
        id: '1',
        value: 'task1',
        label: '任务1',
        checked: false,
        startTime: '2023-10-01 10:00',
        endTIme: '2023-10-01 12:00',
        executor: '张三',
        total: 5,
        warningTimes: 2,
        beat: 4,
        videoUrl: '/path/to/video1',
      },
      {
        id: '2',
        value: 'task2',
        label: '任务2',
        checked: false,
        startTime: '2023-10-01 10:00',
        endTIme: '2023-10-01 12:00',
        executor: '张三',
        total: 5,
        warningTimes: 2,
        beat: 4,
        videoUrl: '/path/to/video1',
      },
      {
        id: '3',
        value: 'task3',
        label: '任务3',
        checked: false,
        startTime: '2023-10-01 10:00',
        endTIme: '2023-10-01 12:00',
        executor: '张三',
        total: 5,
        warningTimes: 2,
        beat: 4,
        videoUrl: '/path/to/video1',
      },
      {
        id: '4',
        value: 'task4',
        label: '任务4',
        checked: false,
        startTime: '2023-10-01 10:00',
        endTIme: '2023-10-01 12:00',
        executor: '张三',
        total: 5,
        warningTimes: 2,
        beat: 4,
        videoUrl: '/path/to/video1',
      },
      {
        id: '5',
        value: 'task5',
        label: '任务5',
        checked: false,
        startTime: '2023-10-01 10:00',
        endTIme: '2023-10-01 12:00',
        executor: '张三',
        total: 5,
        warningTimes: 2,
        beat: 4,
        videoUrl: '/path/to/video1',
      },
      {
        id: '6',
        value: 'task6',
        label: '任务6',
        checked: false,
        startTime: '2023-10-01 10:00',
        endTIme: '2023-10-01 12:00',
        executor: '张三',
        total: 5,
        warningTimes: 2,
        beat: 4,
        videoUrl: '/path/to/video1',
      },
    ]
  } else {
    filterOptions.value = filterOptions.value.filter(item =>
      item.label.includes(e),
    )
  }
}
const filterOptions = ref([
  {
    id: '1',
    value: 'task1',
    label: '任务1',
    checked: false,
    startTime: '2023-10-01 10:00',
    endTIme: '2023-10-01 12:00',
    executor: '张三',
    total: 5,
    warningTimes: 2,
    beat: 4,
    videoUrl: '/path/to/video1',
  },
  {
    id: '2',
    value: 'task2',
    label: '任务2',
    checked: false,
    startTime: '2023-10-01 10:00',
    endTIme: '2023-10-01 12:00',
    executor: '张三',
    total: 5,
    warningTimes: 2,
    beat: 4,
    videoUrl: '/path/to/video1',
  },
  {
    id: '3',
    value: 'task3',
    label: '任务3',
    checked: false,
    startTime: '2023-10-01 10:00',
    endTIme: '2023-10-01 12:00',
    executor: '张三',
    total: 5,
    warningTimes: 2,
    beat: 4,
    videoUrl: '/path/to/video1',
  },
  {
    id: '4',
    value: 'task4',
    label: '任务4',
    checked: false,
    startTime: '2023-10-01 10:00',
    endTIme: '2023-10-01 12:00',
    executor: '张三',
    total: 5,
    warningTimes: 2,
    beat: 4,
    videoUrl: '/path/to/video1',
  },
  {
    id: '5',
    value: 'task5',
    label: '任务5',
    checked: false,
    startTime: '2023-10-01 10:00',
    endTIme: '2023-10-01 12:00',
    executor: '张三',
    total: 5,
    warningTimes: 2,
    beat: 4,
    videoUrl: '/path/to/video1',
  },
  {
    id: '6',
    value: 'task6',
    label: '任务6',
    checked: false,
    startTime: '2023-10-01 10:00',
    endTIme: '2023-10-01 12:00',
    executor: '张三',
    total: 5,
    warningTimes: 2,
    beat: 4,
    videoUrl: '/path/to/video1',
  },
])
const checkedAllOrNot = () => {
  // 获取所有复选框的状态
  const allChecked = filterOptions.value.every(item => item.checked)

  // 根据当前状态切换所有复选框的选中状态
  filterOptions.value.forEach(item => {
    item.checked = !allChecked
  })
}

const detectionObjects = ref([
  {
    id: '1',
    name: '1126×686×484mm箱子',
    progress: [20],
  },
  {
    id: '2',
    name: 'WI-FI',
    progress: [40],
  },
  {
    id: '3',
    name: '说明书',
    progress: [50],
  },
  {
    id: '4',
    name: '保修单',
    progress: [100],
  },
])

const curTask = ref({
  name: '任务1',
  executor: '张三',
  startTime: '2023-05-01 10:00',
  duration: '2小时',
  total: 100,
  warningTimes: 6,
  beat: 4,
  testingObjects: [
    {
      id: 1,
      name: '目标1',
    },
    {
      id: 2,
      name: '目标2',
    },
    {
      id: 3,
      name: '目标3',
    },
  ],
})

const cameraType = ref('1')
const handleOriginChange = val => {
  console.log('🚀 ~ handleOriginChange ~ val:', val)
  cameraType.value = val
}

const handleFileChange = e => {
  console.log('🚀 ~ handleFileChange ~ val:', e.target.files[0])
}
const formSchema = toTypedSchema(
  z.object({
    name: z.string({
      required_error: '请输入任务名称',
    }),
    executor: z.string({
      required_error: '请输入执行人',
    }),
    origin: z.string().optional(),
    camera: z.any().optional(),
    testingObject: z.boolean().default(false).optional(),
    testingObject2: z.boolean().default(false).optional(),
  }),
)
const isShowDialog = ref(false)
const { handleSubmit } = useForm({
  validationSchema: formSchema,
})

const onSubmit = handleSubmit(values => {
  console.log(values)
  toast({
    description: h('div', { class: 'flex items-center gap-2' }, [
      h('img', {
        class: 'w-6 h6',
        src: success,
      }),
      h('p', { class: '' }, '任务创建成功！'),
    ]),
  })
  isShowDialog.value = false
})
</script>

<style scoped>
.shadow-box {
  box-shadow: 4px 4px 30px 0 rgba(0, 0, 0, 0.15);
}
.shadow-box2 {
  box-shadow: 4px 4px 20px 0 rgba(0, 0, 0, 0.25);
}
.shadow-box3 {
  box-shadow: 4px 4px 12px 0 rgba(0, 0, 0, 0.15);
}
</style>
